<svelte:options immutable={true} />

<script lang="ts">
    import { request, gql } from "graphql-request";

    import { useQuery } from "@sveltestack/svelte-query";

    export let task;
    export let index = 0;
</script>

<div
    class="relative h-14 col-span-4 text-black bg-gray-300 
    items-center flex p-2 pr-10 line-clamp-2 "
>
    <i class="absolute top-1 right-1 h-8 w-8 fas fa-camera text-2xl" />
    <div class="w-full h-full flex-row">
        <span class="font-bold float-left sm:float-right mr-4 uppercase">
            Quiz:{task.title}
        </span>
        <p class="block mt-0">
            {task.description}
            Use float-left to float an element to the left of its containeUse float-left
            to float an element to the left of its containerr.
        </p>
    </div>
    <span class="absolute bottom-2 right-3 text-sm">{index + 100}</span>
</div>
<div
    id={task.id}
    data-option="a"
    class="h-14 col-span-4 text-white bg-blue-500 hover:bg-green-700 cursor-pointer flex p-2 line-clamp-2"
>
    {task.description}
    Use float-left to float an element to the left of its containeUse float-left
    to float an element to the left of its containerr.
</div>
